import {
  Autocomplete,
  Avatar,
  Box,
  Button,
  TextField,
  Typography,
} from "@mui/material";
import { useMutation, useQuery } from "@tanstack/react-query";
import React from "react";
import { useEffect } from "react";
import { SEARCH_STUDENT_URL } from "../constants/url";
import { getQueryFn } from "../query/getQueryFn";
import { mutateQueryFn } from "../query/mutateQueryFn";

const PerCard = (props) => {
  return (
    <Box
      sx={{
        margin: "15px 0px",
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
      }}
    >
      <Avatar sx={{ width: 50, height: 50 }} src={props.value.avatar} />
      <Box sx={{ marginLeft: 2 }}>
        <Typography sx={{ fontWeight: "bold" }} variant="">
          {props.value.name}
        </Typography>
        <Typography fontSize="small">
          {props.value?.className + "班"}
        </Typography>
      </Box>
      <Box flexGrow={1} />
      <Button onClick={() => props.onClick(props.value)} variant="outlined">
        {props.text}
      </Button>
    </Box>
  );
};

export default function StudentSelect(props) {
  const { data, isFetching, isError, isSuccess } = useQuery(
    [SEARCH_STUDENT_URL, { useToken: true }],
    getQueryFn
  );

  return (
    <>
      {isSuccess && (
        <Autocomplete
          multiple
          id="size-small-outlined-multi"
          size="small"
          options={data.data.data}
          getOptionLabel={(option) => option.name}
          onChange={(event, newInputValue) => {
            props.setList(newInputValue);
          }}
          value={props.value}
          renderOption={(props, option) => (
            <Box
              component="li"
              sx={{ "& > img": { mr: 2, flexShrink: 0 } }}
              {...props}
            >
              <Avatar src={option.avatar} sx={{ marginRight: 2 }} />
              {option.name}
            </Box>
          )}
          renderInput={(params) => (
            <TextField {...params} label={props.label ?? "选择成员"} />
          )}
        />
      )}
    </>
  );
}
